/*! Blank Theme Main Style | v0.1.2 */
/* Key frame animates */
@keyframes shake {
	0% { transform: rotate(0) }
	50% { transform: rotate(15deg) }
	100% { transform: rotate(0) }
}

/* Scrollbar */
::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-thumb {
	background: #aaa;
	border-radius: 5px;
}
::-webkit-scrollbar-track {
	background: #fff;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	align-items: center;
	background: #eee;
	display: flex;
	flex-direction: column;
	width: 100%;
}

button {
	background: #666;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	padding: .5rem 1rem;
}
button:hover {
	background: #333;
}

header {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 50px 0 30px 0;
}

hr {
	border: 0;
	border-top: 3px dashed #ddd;
	height: 0;
	margin: 1rem 0;
}

nav {
	font-family: smiley-sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: large;
	margin-top: 1.5rem;
}
nav>div {
	cursor: pointer;
	margin: 0 1rem;
	transform: scaleX(1.2);
}

footer {
	font-family: smiley-sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
footer>div {
	margin-bottom: .5rem;
}

/* Metas */
.meta {
	color: #888;
	display: flex;
	font-size: .7rem;
	margin: .5rem 0;
	user-select: none;
}
.meta>div {
	margin-right: .5rem;
}

/* Archives */
.archive {
	border-bottom: 2px dashed #aaa;
	margin-bottom: 2rem;
}
.archive>h1 {
	margin: 0;
}

.archive-excerpt {
	color: #666;
	font-style: italic;
	margin: 1rem 0;
}

/* Comments */
.cancel-comment-reply {
	color: red;
	font-size: .7rem;
}
.cancel-comment-reply:hover {
	text-decoration: underline;
}

.comment-author {
	align-items: center;
	display: flex;
	margin-bottom: .5rem;
	user-select: none;
}

.comment-body {
	padding: .5rem 0;
}

.comment-by-author .comment-name {
	color: red;
}

.comment-content {
	background: #fff;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	margin: 1rem 0;
	padding: .5rem;
}
.comment-content>* {
	margin: 0;
}

.comment-gravatar {
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 40px;
	overflow: hidden;
	width: 40px;
}

.comment-list {
	border-left: 3px solid #ccc;
	list-style: none;
	padding: 0;
	padding-left: 1rem;
}

.comment-name {
	font-weight: bold;
	margin-left: 1rem;
}

.comment-reply {
	color: inherit;
	transition: color .2s;
}
.comment-reply:hover {
	color: #000;
}

#comment-form>input, #comment-form>textarea {
	border: 2px solid #ccc;
	margin-bottom: .5rem;
	outline: none;
	padding: .2rem .5rem;
	transition: border .2s;
	width: 100%;
}
#comment-form>input:focus, #comment-form>textarea:focus {
	border: 2px solid #666;
}

/* Page navigators */
.page-nav {
	align-items: center;
	display: flex;
	justify-content: space-around;
	font-family: smiley-sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	user-select: none;
}
.page-nav>div {
	transform: scaleX(1.2);
	transition: transform .2s;
}

.page-nav--cur {
	color: red;
}
.page-nav--next:hover, .page-nav--prev:hover {
	transform: scaleX(1.4);
}

.page-nav>div:has(a):not(.page-nav--cur):not(.page-nav--next):not(.page-nav--prev)>a {
	padding: .2rem .5rem;
}
.page-nav>div:has(a):not(.page-nav--cur):not(.page-nav--next):not(.page-nav--prev)>a:hover {
	background: #666;
	border-radius: .3rem;
	color: #fff;
}

/* Posts */
.post-end {
	color: #aaa;
	font-size: .5rem;
	text-align: center;
}

.post-cc {
	font-size: .7rem;
	text-align: center;
}

.post-title {
	font-size: 2rem;
}

/* Maintain banner */
.maintain {
	background: #ddd;
	box-shadow: 0 1px 5px #888;
	color: #888;
	text-align: center;
	padding: 1rem 0;
	position: fixed;
	user-select: none;
	width: 100%;
	z-index: 1000;
}
.maintain>a {
	color: #66f;
}
.maintain>a:hover {
	color: #f66;
}

/* Wrappers */
.wrapper-meta>a {
	color: inherit;
	transition: color .2s;
}
.wrapper-meta>a:hover {
	color: #000;
}

/* Site info */
#site-title {
	font-family: smiley-sans, Georgia, 'Times New Roman', Times, serif;
	font-size: 3rem;
	margin: 1rem 0;
	transform: scaleX(1);
	transition: transform .2s;
}
#site-title:hover {
	transform: scaleX(1.2);
}

#site-dscrp {
	color: #666;
	font-family: smiley-sans, 'Times New Roman', Times, serif;
	font-size: 1.5rem;
	margin: 0;
}

/* Author */
#gravatar {
	border: 1px solid #ccc;
	border-radius: 100%;
	height: 150px;
	overflow: hidden;
	transform: scale(1);
	transition: transform .2s;
	width: 150px;
}
#gravatar:hover {
	transform: scale(1.1);
}

#author {
	font-family: smiley-sans, Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: lighter;
	margin: 1rem 0;
	transform: scaleX(1.2);
}

#statistic {
	display: flex;
	margin-bottom: 1rem;
	user-select: none;
	width: 100%;
}
#statistic>div {
	margin: 0 1rem;
	text-align: center;
	width: calc(100% / 3);
}
#statistic>div>h4 {
	margin: .5rem 0;
}

#contacts {
	align-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}
#contacts>div {
	cursor: pointer;
	height: 30px;
	margin-bottom: 2rem;
	transform: scale(1);
	transition: transform .2s;
	width: 30px;
}
#contacts>div:hover {
	transform: scale(1.2);
}

/* Post content */
#post-content {
	word-break: break-all;
}
#post-content a {
	color: #66f;
}
#post-content a:hover {
	color: #f66;
}
#post-content blockquote {
	color: #666;
	border-left: 3px solid #ccc;
	margin: 1rem 0;
	padding: 5px 1rem;
	overflow: auto;
}
#post-content code:not(#post-content pre>code) {
	background: #ddd;
	border-radius: .3rem;
	color: #d33;
	margin: 0 .2rem;
	padding: 0 .5rem;
	word-break: keep-all;
}
#post-content hr {
	border: 0;
	border-top: 3px dashed #ddd;
	height: 0;
	margin: 1rem 0;
}
#post-content li {
	line-height: 150%;
}
#post-content img {
	margin: 1rem;
	width: 100%;
}
#post-content p {
	line-height: 150%;
}
#post-content pre>code {
	max-height: 500px;
}
#post-content>table {
	border: 1px solid #888;
	border-collapse: collapse;
	margin: 1rem 0;
	width: 100%;
}
#post-content>table td {
	border: 1px solid #888;
	padding: 5px;
}
#post-content>table th {
	background: #666;
	color: #fff;
	padding: 8px;
	word-break: keep-all;
}

/* OwO */
.OwO {
	margin-bottom: .5rem;
}
.OwO-body {
	box-shadow: 2px 2px 2px #aaa;
}

/* Search */
.search-bar {
	align-items: stretch;
	display: flex;
	width: 30%;
	z-index: 998;
}

.search-bg {
	background: #0006;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 997;
}

.search-layer {
	align-items: center;
	display: none;
	height: 100%;
	justify-content: center;
	position: fixed;
	width: 100%;
	z-index: 999;
}

.search-bar>input {
	border: 2px solid #ccc;
	border-right: 0;
	outline: none;
	padding: 0 .5rem;
	width: 90%;
}
.search-bar>button {
	align-items: center;
	background: #ddd;
	border: 2px solid #ccc;
	border-left: 0;
	border-radius: 0;
	display: flex;
	height: 3rem;
	justify-content: center;
	padding: 0;
	width: 3rem;
}
.search-bar>button:hover {
	background: #aaa;
	border: 2px solid #aaa;
	border-left: 0;
}

#search-btn {
	height: 1.5rem;
	transform: none !important;
	width: 1.5rem;
}
#search-btn:hover img {
	animation: shake .2s infinite;
}

/* Side buttons */
.side-btn {
	bottom: 2rem;
	right: 2rem;
	position: fixed;
}
.side-btn>div {
	background-color: #fff;
	border-radius: 100%;
	cursor: pointer;
	display: none;
	height: 50px;
	margin-top: 1rem;
	padding: 10px;
	transform: scale(1);
	transition: transform .2s;
	width: 50px;
}
.side-btn>div:hover {
	transform: scale(1.2);
}

/* Mobile buttons */
.mobile-btn-nav {
	background-color: #fff;
	box-shadow: 1px 1px 5px lightgray;
	display: none;
	height: 2rem;
	position: fixed;
	top: 0;
	right: 0;
	width: 2rem;
	z-index: 99;
}

.mobile-btn-nav-close {
	display: none;
    height: 2rem;
    transform: rotate(90deg);
	width: 2rem;
}

.mobile-btn-aside {
	background-color: #fff;
	box-shadow: 1px 1px 5px lightgray;
	display: none;
	height: 2rem;
	position: fixed;
	top: 0;
	left: 0;
	width: 2rem;
	z-index: 99;
}

.mobile-btn-aside-close {
	cursor: pointer;
	display: none;
    height: 2rem;
	margin-bottom: 2rem;
    transform: rotate(-90deg);
	width: 2rem;
}

/* Loading frame */
@keyframes spin {
	0% { transform: rotate(0) }
	50% { transform: rotate(180deg) }
	100% { transform: rotate(360deg) }
}

.loading-frame {
	align-items: center;
	background: #fff;
	display: flex;
	height: 100%;
	justify-content: center;
	position: fixed;
	width: 100%;
	z-index: 10001;
}

.loading-text {
	background: #fff;
	color: #ccc;
	font-size: 2rem;
	font-weight: bold;
	padding: .2rem 0;
	text-align: center;
	user-select: none;
	width: 100%;
	z-index: 10003;
}

.loading-spin {
	animation-delay: var(--spin-delay);
	animation-duration: var(--spin-time);
	animation-iteration-count: infinite;
	animation-name: spin;
	animation-timing-function: linear;
	border: 3px solid #ccc;
	border-right-color: transparent;
	border-radius: 100%;
	height: var(--spin-size);
	position: absolute;
	width: var(--spin-size);
	z-index: 10002;
}

/* Katex fix */
.katex-display {
	background: white;
	overflow: auto;
	padding: 1rem .5rem;
}

/* Reactive */
@media screen and (max-width: 768px) {
	aside {
		background: #eee;
		box-shadow: 1px 0 5px grey;
		height: 100%;
		justify-content: center;
		left: -50rem;
		padding: 2rem;
		position: fixed;
		top: 0;
		transition: left .3s;
		z-index: 100;
	}

	nav {
		background: #eee;
		box-shadow: 0 1px 5px grey;
		flex-direction: column;
		height: 100%;
		margin: 0;
		padding: 5rem 1rem 1rem 1rem;
		position: fixed;
		top: 0;
		transition: right .3s;
		right: -10rem;
		z-index: 100;
	}
	nav>div {
		margin: 1rem;
	}

	#center {
		margin: 0 2rem;
		width: 90%;
	}

	#contacts>div {
		margin-bottom: 1rem;
	}

	.hide-mobile {
		display: none;
	}

	.mobile-btn-nav, .mobile-btn-nav-close, .mobile-btn-aside, .mobile-btn-aside-close {
		display: block;
	}

	.search-bar {
		padding: 0 1rem;
		width: 100%;
	}
}
